module MC.View {
    export class ZhiweiDiv {
        public constructor(fun: Function = null) {
            this.init(fun);
        }

        private init(fun: Function) {
            this.Load((data: any) => {
                //  console.log(data);
                fun && fun();
            });
        }

        public close = true;
        private data: any = null;

        private Load(Fun: Function) {
            if (this.data) {
                Fun(this.data);
                return;
            }
            MC.apiD('/api/home/release/job_list', {}, (data: any) => {
                this.data = data;
                Fun(data);
            });
        }

        /** 返回选择的值 */
        public selectVal(selectValfun: Function) {
            if (!this.data) {
                return;
            }
            let zhiweiDiv = $(`

			<div class="zhiweiDiv clearfix">
				<h2 class="titleh2">选择部门和职位</h2>
				<a class="close">关闭</a>
				<div class="scontentdiv clearfix">
                    <ul class="menuUl clearfix"></ul>
                    <ul class="erjiUl clearfix"></ul>
				</div>
				<div class="buttonDiv clearfix"><button type="button" 
					style=" display: block"
				class=" mui-btn mui-btn-primary btn_queding">确定</button>
				<button class="mui-btn btn_quxiao">取消</button>
				
				</div>
			</div>
				`);
            for (let i = 0; i < this.data.length; i++) {
                let li = this.data[i];
                let menu = $(`<li class="menuli" key_id="` + i + `">` + li.position.name + `</li>`);
                zhiweiDiv.find('.menuUl').append(menu);
            }
            let mthis = this;
            zhiweiDiv.find('.menuUl .menuli').click(function () {
                let key_id = $(this).attr('key_id');
                zhiweiDiv.find('.menuUl .menuli').removeClass('on');
                $(this).addClass('on');
                let erjidata = mthis.data[key_id].position.job;
                $('.zhiweiDiv .erjiUl').html('');
                for (let i = 0; i < erjidata.length; i++) {
                    let li = erjidata[i];
                    $('.zhiweiDiv .erjiUl').append(`
					<li class="erjili" d_id="` + li.id + `">` + li.name + `</li>
					`);
                }
            });
            zhiweiDiv.on('click', '.erjiUl .erjili', function () {
                zhiweiDiv.find('.erjiUl .erjili').removeClass('on');
                let one = $(this);
                let id = one.attr('d_id');
                let name = one.text();
                one.addClass('on');
                ///	console.log(id,name);
            });

            $('body').append(zhiweiDiv);
            zhiweiDiv.find('.menuUl .menuli')[0].click();
            zhiweiDiv.find('.buttonDiv .btn_queding').click(() => {
                let menu = zhiweiDiv.find('.menuUl .menuli.on');
                let erji = zhiweiDiv.find('.erjiUl .erjili.on');
                if (!erji[0]) {
                    MC.msg.alert('请选择职位');
                    return;
                }
                let data = {
                    menu: menu.text(),
                    erji: erji.text(),
                    id: erji.attr('d_id')
                };
                zhiweiDiv.remove();
                selectValfun(data);
            });
            zhiweiDiv.find('.close,.btn_quxiao').click(() => {
                zhiweiDiv.remove();
            });
            if (!this.close) {
                zhiweiDiv.find('.close,.btn_quxiao').hide();
            }

        }

    }
}

/** <div class="zhiweiDiv clearfix">
 <ul class="menuUl clearfix">
 <li class="menuli" d_id="2">总经办</li>
 <li class="menuli" d_id="2">总经办</li>
 <li class="menuli" d_id="2">总经办</li>
 <li class="menuli on" d_id="2">总经办</li>
 <li class="menuli" d_id="2">总经办</li>
 </ul>
 <ul class="erjiUl clearfix">
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili on" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 <li class="erjili" d_id="22">子内容</li>
 </ul>
 </div> */